<template>
  <div class="emoji-picker">
  <el-popover
    placement="top-start"
    width="300"
    height="200"
    trigger="click"
  >
    <!-- 表情分类列表 -->
    <div class="popover-content">
    <el-scrollbar style="height: 200px " wrap-style="overflow-x:hidden;">
      <div v-for="(category, index) in emojiArr" :key="index">
        <a style="color:rgb(88, 105, 218)">{{ category.name }}</a>
          <!-- 表情列表 -->
          <div class="emoji-list">
            <a class="emoji-icon cursor-pointer" v-for="(emoji, emojiIndex) in category.iconArr" :key="emojiIndex" @click.prevent="selectEmoji(emoji.icon)">{{ emoji.icon }}</a>
          </div>
      </div>
    </el-scrollbar>
    </div>
   <p slot="reference" class="emoji-reference cursor-pointer">
 <svg t="1695488993975" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6052" width="30" height="30"><path d="M495.465 830.665c-187.138 0-264.948-168.222-268.193-175.401l62.966-28.307c2.486 5.49 62.207 134.667 205.194 134.667 153.067-1.795 211.302-129.213 213.685-134.633l63.103 27.996c-3.141 7.077-79.054 173.364-273.13 175.643l-3.625 0.034zM500.16 991.221c-256.974 0-466.034-209.060-466.034-466.034s209.060-466.034 466.034-466.034 466.034 209.060 466.034 466.034-209.060 466.034-466.034 466.034zM500.16 128.196c-218.897 0-396.991 178.094-396.991 396.991s178.094 396.991 396.991 396.991 396.991-178.094 396.991-396.991-178.059-396.991-396.991-396.991zM311.088 444.27c0 29.689 24.062 53.818 53.818 53.818s53.818-24.096 53.818-53.818-24.062-53.818-53.818-53.818-53.818 24.096-53.818 53.818zM580.765 444.27c0 29.689 24.062 53.818 53.818 53.818s53.818-24.096 53.818-53.818-24.062-53.818-53.818-53.818-53.818 24.096-53.818 53.818z" fill="#1296db" p-id="6053"></path></svg>
</p>

  </el-popover>
  </div>
</template>

<script>
import { emojiArr } from './emojiArr'; // 导入emoji数据
export default {
  name:'MyEmoji',
  data() {
    return {
      emojiArr: emojiArr, // 使用导入的emoji数据
    };
  },
  methods: {
    selectEmoji(emoji) {
      // 将选中的emoji传递给父组件或执行其他操作
      this.$emit('emoji-selected', emoji);
    },
  },
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
.emoji-picker {
  /* 添加样式 */
}

.emoji-list {
  font-size: 22px; /* 设置表情图标的大小，根据需要调整 */
}

.emoji-icon {
  /* 添加样式 */
}
/* 小手 */
.cursor-pointer {
  cursor: pointer;
}
.emoji-reference {
  font-size: 30px; /* 设置表情图标的大小，根据需要调整 */
  margin-bottom: 0px;
  margin-right: 10px;
     display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    height: 100%; /* 设置容器高度为100% */
}

</style>
